<ion-split-pane>

    <!-- logged out menu -->
    <ion-menu id="loggedOutMenu" [content]="content">
  
      <!-- <ion-header>
        <ion-toolbar>
          <ion-title></ion-title>
        </ion-toolbar>
      </ion-header> -->
  
      <ion-content class="outer-content">

          <ion-list-header style="background-color:#c8ddd4">
              <ion-avatar>
                  <img style="width:130px;height:130px;" [src]="logoUrl">
              </ion-avatar>
              <h2 style="color:gray">游客，你好。</h2>
          </ion-list-header>

        <ion-list>
            <ion-item no-lines menuClose *ngFor="let page of loggedOutPages" (click)="openPage(page)"  [ngStyle]="{'background-color': isActive(page)?'#efefef':'white'}">
                <ion-icon item-start [name]="page.icon" [color]="isActive(page)?'secondary':'primary'"></ion-icon>
                <h2>{{page.title}}</h2>
            </ion-item>
          </ion-list> 
      </ion-content>
  
    </ion-menu>
  
    <!-- logged in menu -->
    <ion-menu id="loggedInMenu" [content]="content">
  
      <ion-content class="outer-content">

        <ion-list>
            <ion-list-header style="background-color:#c8ddd4">
                <ion-avatar (click)="gotoPersonalInfoPage()">
                    <img style="width:100px;height:100px;" [src]="avatarUrl">
                </ion-avatar>
                <h2 style="color:gray">{{userName}}</h2>
            </ion-list-header>
            
            <ion-item no-lines menuClose *ngFor="let page of loggedInPages" (click)="openPage(page)" [ngStyle]="{'background-color': isActive(page)?'#efefef':'white'} ">
              <ion-icon item-start [name]="page.icon" [color]="isActive(page)?'secondary':'primary'"></ion-icon>
              {{page.title}}
            </ion-item>
          </ion-list> 
      </ion-content>
  
    </ion-menu>
  
    <!-- main navigation -->
    <ion-nav [root]="rootPage" #content swipeBackEnabled="false" main name="app">
        
    </ion-nav>
  
  </ion-split-pane>
<chart-bar>

</chart-bar>